<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				padding: 0rem;
				margin: 0px;
			}
			.title{
				padding-bottom: 10px;
				padding-top: 10px;
				border-bottom: 1px solid #ccc;
				background: #fcfcfc;
				font-size: 18px;
				font-weight: bold;
			}
			.list{
				width: 600px;
				margin: 0 auto;
				
			}
			.item{
				display: flex;
				padding: 8px 0px 5px 0px;
				border-bottom: 1px dashed #ccc;
			}
			.item:first-child{
				border-bottom: 1px solid #ddd;
				font-weight: bold;
			}
			.id{
				width: 100px;
			}
			.name{
				width: 200px;
			}
			.price{
				width: 100px;
			}
			.caozuo{
				width: 200px;
			}
			.xiugai{
				padding: 30px;
			}
		</style>
		<!-- 安装jquery -->
		<script src="./js/jquery-3.6.0.min.js"></script>
		
		<script>
			//文档就绪完毕获取所有的商品列表
			$(function(){
				//执行获取商品列表的操作,调用getlist函数
				getlist();
			})
			
			//getlist自己封装的函数，获取所有的商品列表
			function getlist(){
				//一进页面直接执行清空操作
				$(".list").html(`
					<div class="item">
						<div class="id">商品ID</div>
						<div class="name">商品名字</div>
						<div class="price">商品价格</div>
						<div class="caozuo">操作</div>
					</div>
				`)
				//获取所有的商品列表，通过get()
				$.get("http://428m523a99.qicp.vip/ajax/good/list",function(res){
					//res就是获取到的所有商品字符串
					//将字符串res转成json对象数组，遍历数组，拼接成字符串，追加到list后面
					var arr=JSON.parse(res);
					var str="";//做拼接使用
					for(var g of arr){
						//g就是每次遍历的商品对象
						str += `
							<div class="item">
								<div class="id">${g.id}</div>
								<div class="name">${g.name}</div>
								<div class="price">${g.price}</div>
								<div class="caozuo">
									<button class="update" v="${g.id}">修改</button>
									<button class="delete" v="${g.id}">删除</button>
								</div>
							</div>
						`
					}
					//追加到list
					$(".list").append(str)
				})
			
			}
			
			//进入页面没有文档就绪完毕的时候，是没有一条条商品数据的
			//文档就绪完毕才出现一条条数据，这是未来产生的一条数据
			//未来产生的数据直接使用原来事件方式，可能无效
			//可以使用未来事件
			/*
			$(document).on("click",".urlTip",function(){
				return confirm('您访问的链接即将离开***网站，是否继续？');
			})
			*/
			
			//1做修改的时候有两件事件，根据要修改的商品的id获取商品信息展示到修改的地方
			//2.提交修改，重新获取一下数据
			//文档加载完毕以后，当我点击修改的时候执行。。。。
			$(function(){
				/*
				 //这个方式对于jquery生成的html事件可能无效
				 $(".update").click(function(){
					console.log($(this).attr("v"))
				}) */
				//如果对于jquery生成的html无效，则使用这个未来事件的方式
				//document就是当前文档，click就是点击事件 .update 就是jquery生成的标签的class名称
				//function还是click执行的function
				$(document).on("click",".update",function(){
					//$(this)当前点击的标签
					//attr是获取标签的属性
					var id=$(this).attr("v");
					
					//根据id获取要修改的商品
					$.get("http://428m523a99.qicp.vip/ajax/good/get?id="+id,function(res){
						//res就是获取到的商品字符串
						var obj=JSON.parse(res);
						//将商品的id设置到class为gid的地方
						$(".gid").val(obj.id)
						//将商品的name设置到class为gname的地方
						$(".gname").val(obj.name)
						//将商品的price设置到class为price的地方
						$(".gprice").val(obj.price)
					})
				})
			})
			
			//文档加载完毕以后，执行提交操作
			$(function(){
				//点击tijiaobtn执行提交操作
				$(".tijiaobtn").click(function(){
					//获取要提交的商品的id，商品的价格，商品名称
					//$(".gid").val()获取class为gid为文本框的值赋值给自定义变量id
					var id=$(".gid").val();
					//$(".gname").val()获取class为gname为文本框的值赋值给自定义变量name
					var name=$(".gname").val();
					//$(".gprice").val()获取class为gprice为文本框的值赋值给自定义变量price
					var price=$(".gprice").val();
					
					//将调用接口，传id name price
					//自定义字符串param，用于拼接参数
					var param="id="+id+"&name="+name+"&price="+price;
					$.post("http://428m523a99.qicp.vip/ajax/good/update",param,function(res){
						//当修改成功以后，重新获取一下页面数据
						var obj=JSON.parse(res)
						
						if(obj.status==1){
							//重新获取一下页面数据 就是重新调用获取商品列表的函数
							getlist();
						}
					})
				})
			})
			
			//添加商品操作
			$(function(){
				$(".addbtn").click(function(){
					var name = $(".namex").val();
					var price = $(".pricex").val();
					var param="&name="+name+"&price="+price;
					$.post("http://428m523a99.qicp.vip/ajax/good/add",param,function(res){
						//当修改成功以后，重新获取一下页面数据
						var obj=JSON.parse(res)
						if(obj.status==1){
							//重新获取一下页面数据 就是重新调用获取商品列表的函数
							getlist();
						}
					})
				})
			})
			
			//删除商品操作
			$(function(){
				$(document).on("click",".delete",function(){
					//弹窗让用户判断
					var jg = confirm("确定删除吗？");
					if(jg){
						//获取当前按钮的id
						var id=$(this).attr("v");
						$.post("http://428m523a99.qicp.vip/ajax/good/delete?id="+id,function(res){
							var obj=JSON.parse(res)
									
							if(obj.status==1){
								//重新获取一下页面数据 就是重新调用获取商品列表的函数
								getlist();
							}
						})
					}
				})
			})
			
		</script>
	</head>
	<body>
		<div class="title" align="center">商品列表</div>
		<div class="list" align="center">
			<div class="item">
				<div class="id">商品ID</div>
				<div class="name">商品名字</div>
				<div class="price">商品价格</div>
				<div class="caozuo">操作</div>
			</div>
		</div>
		<div class="xiugai">
			<h5>商品修改</h5>
			<form>
				商品id<input type="text" class="gid" readonly="readonly"/>
				商品名<input type="text" class="gname" />
				商品价格<input type="text" class="gprice" />
				<input class="tijiaobtn" type="button" value="提交修改" />
			</form>
		</div>
		<div class="xiugai">
			<h5>商品添加</h5>
			<form>
				商品名<input type="text" class="namex" />
				商品价格<input type="text" class="pricex" />
				<input class="addbtn" type="button" value="添加商品" />
			</form>
		</div>
	</body>
</html>
